<!--
  使用步骤
    0. 在项目中加入components/pagination/pagination.vue文件
    2. 注册公共组件 util/components.js
      import pagination from "components/pagination/pagination"
      Vue.component("sph-pagination",pagination)
    3. 在组件上使用
        <sph-pagination></sph-pagination>
            props:
              total  总数量(一般来自于数据库)
              pageSize 每页显示多少条(使用者自定义)
              lxyms    连续页码数(使用者自定义)
              initPage  初始页(使用者自定义)
                  分页组件内部会监听初始页的变化;如果初始页发生改变;那么当前页也会跟着一起变
            events:
              currentPageChange: 当分页组件内部的当前页发生改变时 触发;事件回调函数的第一个参数就是最新的当前页
-->


<template>
    <div class="pagination">

      <!--当当前页小于等于1的时候 上一页按钮应该是禁用的 disabled:true-->
      <button :disabled="currentPage<=1" @click="updateCurrentPage(currentPage-1)">上一页</button>
      <!--当连续页码数的起始页大于等于2 当前这个1号按钮 就应该出现-->
      <button v-if="startEnd.start>=2" @click="updateCurrentPage(1)">1</button>
      <!--当连续页码数的起始页大于等于3 当前这个1号按钮 就应该出现-->
      <button v-if="startEnd.start>=3" disabled>···</button>

      <!--v-for 和 v-if;联合起来使用 会有性能问题-->
      <button @click="updateCurrentPage(pageNum)"
              v-for="pageNum in pageNums" :key="pageNum"
              :class="{active:pageNum === currentPage}"
              v-if="pageNum >=startEnd.start && pageNum <=startEnd.end">
        {{pageNum}}
      </button>


      <!--当连续页码数的结束页小于等于pageNums-2 当前这个按钮 就应该出现-->
      <button v-if="startEnd.end<=pageNums-2" disabled>···</button>
      <!--当连续页码数的结束页小于等于pageNums-1 当前这个按钮 就应该出现-->
      <button v-if="startEnd.end<=pageNums-1"  @click="updateCurrentPage(pageNums)">{{pageNums}}</button>
       <!--当当前页大于等于pageNums的时候 下一页按钮应该是禁用的 disabled:true-->
      <button :disabled="currentPage>=pageNums" @click="updateCurrentPage(currentPage+1)">下一页</button>

      <button style="margin-left: 30px">共 {{this.total}} 条</button>
    </div>
</template>

<script>
    export default {
      name: "Pagination",
      //total:数据的总数量  pageSize:每页显示多少条  lxyms:连续页码数 initPage:初始页码
      props:["total","pageSize","lxyms","initPage"],
      data(){
        return {
          currentPage:this.initPage//当前页
        }
      },
      computed:{
        //总页数
        pageNums(){
          return Math.ceil(this.total / this.pageSize)
        },
        //根据当前页 和 连续页码数 计算连续页码的起始页码 和 结束页码
        startEnd(){
          //end - start  = lxyms -1
          //end = start + lxyms - 1
          //start = end - lxyms + 1
          let start = 0; // 计算连续页码的起始页码
          let end = 0; // 计算连续页码的结束页码

          //当前页:currentPage
          //连续页码数:lxyms
          //总页数: pageNums
          const {currentPage,lxyms,pageNums} = this;

          //计算出start的预期值
          start = currentPage - Math.floor(lxyms/2)
          //如果start值不合法 则置为1
          start < 1 ? start = 1 : ""
          //end 会根据start的值自动进行补位
          end = start + lxyms - 1
          if(end > pageNums){
              //end值不合法 需要重置
              end = pageNums;
              //start要补位
              start =  end - lxyms + 1
              //start 和 end都不合法
              start < 1 ? start = 1 : ""
          }
          return {
            start,
            end
          }
        }
      },
      methods:{
        //触发currentPage的修改
        updateCurrentPage(page){
            if(page <= 0) return;
            if(page > this.pageNums) return;
            if(page===this.currentPage) return;
            this.currentPage = page;

            //要通知外部逻辑 分页组件中的当前页数据产生了改变
            this.$emit("currentPageChange",this.currentPage)
        }
      },
      watch:{
        //分页组件内部响应外部数据的改变!!!
        initPage:{
          handler(page){
            this.currentPage = page;
          },
          deep:true,
          immediate:true
        }
      }
    }
</script>

<style lang="less" scoped>
    .pagination {
        button {
            margin: 0 5px;
            background-color: #f4f4f5;
            color: #606266;
            outline: none;
            border-radius: 2px;
            padding: 0 4px;
            vertical-align: top;
            display: inline-block;
            font-size: 13px;
            min-width: 35.5px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            border: 0;

            &[disabled] {
                color: #c0c4cc;
                cursor: not-allowed;
            }

            &.active {
                cursor: not-allowed;
                background-color: #409eff;
                color: #fff;
            }
        }
    }
</style>